<template>
  <div>
    <a-form-model ref="correctPersonForm" :rules="rules" :model="infoForm">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="姓名" prop="name">
        <a-input v-model="infoForm.name" allow-clear :maxLength="125" placeholder="请输入姓名" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="身份证号" prop="cardno">
        <a-input v-model="infoForm.cardno" allow-clear :maxLength="125" placeholder="请输入身份证号" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系号码" prop="phone">
        <a-input v-model="infoForm.phone" allow-clear :maxLength="125" placeholder="请输入联系号码" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="民族" prop="nation">
        <a-select allow-clear placeholder="请选择民族" v-model="infoForm.nation">
          <a-select-option v-for="nation in Tp_nation" :key="nation.id" :value="nation.id">
            {{ nation.description }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="性别" prop="gender">
        <a-select allow-clear placeholder="请选择性别" v-model="infoForm.gender">
          <a-select-option v-for="gender in Tp_genderList" :key="gender.value" :value="gender.value">
            {{ gender.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所在司法所" prop="deptid">
        <a-select allow-clear placeholder="请选择所在司法所" v-model="infoForm.deptid">
          <a-select-option v-for="departInfo in lawDeparts" :key="departInfo.id" :value="departInfo.id">
            {{ departInfo.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="矫正类型" prop="crctype">
        <a-select v-model="infoForm.crctype" placeholder="请选择矫正类型" allowClear>
          <a-select-option v-for="crcType in Tp_crc_userList" :key="crcType.value" :value="crcType.value">
            {{ crcType.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="管控级别" prop="controltype">
        <a-select v-model="infoForm.controltype" placeholder="请选择管控级别" allowClear>
          <a-select-option v-for="controltype in Tp_crc_ctrlList" :key="controltype.value" :value="controltype.value">
            {{ controltype.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="罪名" prop="crime">
        <a-input v-model="infoForm.crime" allow-clear :maxLength="125" placeholder="请输入罪名" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否重点人员">
        <a-select v-model="infoForm.focus" placeholder="请选择是否重点人员" allowClear>
          <a-select-option :key="YesNoValue.YES" :value="YesNoValue.YES"> 是 </a-select-option>
          <a-select-option :key="YesNoValue.NO" :value="YesNoValue.NO"> 否 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="文化程度" prop="culture">
        <a-select v-model="infoForm.culture" placeholder="请选择文化程度" allowClear>
          <a-select-option v-for="education in Per_eduList" :key="education.value" :value="education.value">
            {{ education.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="出生日期" prop="birthym">
        <a-date-picker v-model="infoForm.birthym" placeholder="请选择出生日期" :allowClear="true" format="YYYY-MM-DD" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="入矫日期" prop="enterdate">
        <a-date-picker
          v-model="infoForm.enterdate"
          placeholder="请选择入矫日期"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="家庭住址" prop="addr">
        <a-input v-model="infoForm.addr" allow-clear :maxLength="125" placeholder="请输家庭住址" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="户籍信息" prop="domicile">
        <a-input v-model="infoForm.domicile" allow-clear :maxLength="125" placeholder="请输入户籍信息" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="国籍" prop="nationality">
        <a-select v-model="infoForm.nationality" placeholder="请选择国籍" allowClear>
          <a-select-option v-for="item in Per_nationalityList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="户口类型" prop="housetype">
        <a-select v-model="infoForm.housetype" placeholder="请选择户口类型" allowClear>
          <a-select-option v-for="item in Per_housetypeList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="原职业" prop="oricareer">
        <a-input v-model="infoForm.oricareer" allow-clear :maxLength="125" placeholder="请输入原职业" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="就业就学" prop="perform">
        <a-select v-model="infoForm.perform" placeholder="请选择就业就学" allowClear>
          <a-select-option v-for="item in Per_performList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="原政治面貌" prop="politics">
        <a-select v-model="infoForm.politics" placeholder="请选择原政治面貌" allowClear>
          <a-select-option v-for="item in Per_politicsList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="婚姻状况" prop="marriage">
        <a-select v-model="infoForm.marriage" placeholder="请选择婚姻状况" allowClear>
          <a-select-option v-for="item in Per_marryList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="刑种" prop="penalty">
        <a-select v-model="infoForm.penalty" placeholder="请选择刑种" allowClear>
          <a-select-option v-for="item in Tp_crc_penaltyList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="入矫类别" prop="entertype">
        <a-select v-model="infoForm.entertype" placeholder="请选择入矫类别" allowClear>
          <a-select-option v-for="item in Tp_crc_enterList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="原判起日" prop="oristartdate">
        <a-date-picker
          v-model="infoForm.oristartdate"
          placeholder="请选择原判起日"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="原判止日" prop="orienddata">
        <a-date-picker
          v-model="infoForm.orienddata"
          placeholder="请选择原判止日"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="报到时间" prop="reportdate">
        <a-date-picker
          v-model="infoForm.reportdate"
          placeholder="请选择报到时间"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="决定机关类型" prop="organtype">
        <a-select v-model="infoForm.organtype" placeholder="请选择决定机关类型" allowClear>
          <a-select-option v-for="item in Tp_organtypeList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="决定机关名称" prop="organname">
        <a-input v-model="infoForm.organname" allow-clear :maxLength="125" placeholder="请输入决定机关名称" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="矫正期限" prop="timelong">
        <a-input v-model="infoForm.timelong" allow-clear :maxLength="125" placeholder="请输入矫正期限" />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="矫正开始日期" prop="startdate">
        <a-date-picker
          v-model="infoForm.startdate"
          placeholder="请选择矫正开始日期"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="矫正结束日期" prop="enddate">
        <a-date-picker
          v-model="infoForm.enddate"
          placeholder="请选择矫正结束日期"
          :allowClear="true"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="头像图片" prop="avatar">
        <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :customRequest="(file) => uploadFile(file)"
          :before-upload="(file) => beforeUpload(file)"
        >
          <img style="width: 200px; height: 200px" v-if="infoForm.avatarUrl" :src="infoForm.avatarUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-model-item>

      <a-form-model-item>
        <div class="text-center">
          <a-button class="m-r-8 btn_normal_color" icon="reload" @click="resetForm"> 重置 </a-button>
          <a-button class="btn_primary_color" type="primary" @click="onSubmit" icon="save" :loading="loading">
            保存
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { Tp_genderList, Tp_genderValue } from '@/enumeration/Tp_gender'
import { Tp_crc_userList } from '@/enumeration/correction/Tp_crc_user'
import { Tp_crc_ctrlList } from '@/enumeration/correction/Tp_crc_ctrl'
import { minioUpload } from '@/api/base/file'
import { saveOrUpdatePerson } from '@/api/correction/crc_person.js'
import { getSexByIdCard } from '@/utils/idCard.js'
import { queryEnumeration } from '@/api/accept/enum_load'
import { YesNoValue } from '@/enumeration/YesNo.js'
import { Per_eduList } from '@/enumeration/correction/Per_edu'
import { Per_nationalityList } from '@/enumeration/correction/Per_nationality'
import { Per_housetypeList } from '@/enumeration/correction/Per_housetype'
import { Per_performList } from '@/enumeration/correction/Per_perform'
import { Per_politicsList } from '@/enumeration/correction/Per_politics'
import { Per_marryList } from '@/enumeration/correction/Per_marry'
import { Tp_crc_penaltyList } from '@/enumeration/correction/Tp_crc_penalty'
import { Tp_crc_enterList } from '@/enumeration/correction/Tp_crc_enter'
import { Tp_organtypeList } from '@/enumeration/correction/Tp_organtype'
import { Decrypt, Encrypt } from '@/enumeration/SM.js'

export default {
  props: {
    infoForm: {
      type: Object,
      default() {
        return {
          id: undefined,
          name: undefined, // 姓名
          gender: undefined, // 性别
          crctype: undefined, // 矫正类别
          crime: undefined, // 罪名
          cardno: undefined, // 身份证号
          timelong: undefined, // 矫正期限
          startdate: undefined, // 矫正开始日期
          enddate: undefined, // 矫正结束日期
          deptid: undefined, // 所属司法所id
          adid: undefined, // 行政区划代码
          controltype: undefined, // 管控级别
          phone: undefined, // 联系号码
          nation: undefined, // 民族
          culture: undefined, // 文化程度
          birthy: undefined, // 出生年月
          enterdate: undefined, // 入矫时间
          addr: undefined, // 家庭地址
          domicile: undefined, // 户籍信息
          nationality: undefined, // 国籍
          housetype: undefined, // 户口类型
          oricareer: undefined, // 原职业
          perform: undefined, // 就业就学
          politics: undefined, // 原政治面貌
          marriage: undefined, // 婚姻状况
          religion: undefined, // 宗教信仰
          oristartdate: undefined, //  原判起日
          orienddata: undefined, // 原判止日
          penalty: undefined, // 刑种
          entertype: undefined, // 入矫类型
          reportdate: undefined, // 报道时间
          organtype: undefined, // 决定机关类型
          organname: undefined, // 决定机关名称
          focus: undefined,
          avatar: undefined,
          avatarUrl: undefined,
          isEdit: false,
        }
      },
    },
    lawDeparts: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      Tp_genderList: Tp_genderList,
      Tp_crc_userList: Tp_crc_userList,
      Tp_crc_ctrlList: Tp_crc_ctrlList,
      YesNoValue: YesNoValue,
      Per_eduList: Per_eduList,
      Per_nationalityList: Per_nationalityList,
      Per_housetypeList: Per_housetypeList,
      Per_performList: Per_performList,
      Per_politicsList: Per_politicsList,
      Per_marryList: Per_marryList,
      Tp_crc_penaltyList: Tp_crc_penaltyList,
      Tp_crc_enterList: Tp_crc_enterList,
      Tp_organtypeList: Tp_organtypeList,
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      loading: false, // 按钮显示
      Tp_nation: [], // 民族信息
      /**
       * 添加表单验证规则
       */
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        cardno: [{ required: true, validator: this.checkCardno }],
        phone: [{ required: true, validator: this.checkTel }],
        crime: [{ required: true, message: '请输入罪名', trigger: 'blur' }],
        timelong: [{ required: true, message: '请输入社矫期限', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        nation: [{ required: true, message: '请选择民族', trigger: 'change' }],
        deptid: [{ required: true, message: '请选择所在司法所', trigger: 'change' }],
        crctype: [{ required: true, message: '请选择矫正类别', trigger: 'change' }],
        controltype: [{ required: true, message: '请选择管控级别', trigger: 'change' }],
        startdate: [{ required: true, message: '请选择矫正开始日期', trigger: 'change' }],
        enddate: [{ required: true, message: '请选择矫正结束日期', trigger: 'change' }],
        culture: [{ required: true, message: '请选择文化程度', trigger: 'change' }],
        birthym: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        enterdate: [{ required: true, message: '请选择入矫日期', trigger: 'change' }],
      },
    }
  },
  watch: {
    'infoForm.cardno': {
      handler: function (newVal, oldVal) {
        if (newVal && /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(newVal)) {
          // 通过身份证计算对应的年龄和性别
          const sex = getSexByIdCard(newVal)
          this.infoForm.gender = sex === 1 ? Tp_genderValue.MALE : Tp_genderValue.FEMALE
        }
      },
      deep: true,
    },
  },
  created() {
    this.queryEnumeration('Tp_nation', (val) => {
      this.Tp_nation = val
    })
  },
  methods: {
    /**
     * 查询枚举值
     */
    async queryEnumeration(val, callback) {
      await queryEnumeration({ enName: val }).then((res) => {
        if (res.code !== 0) {
          console.log('查询枚举值错误')
        } else {
          callback(res.data)
        }
      })
    },
    checkCardno(rule, value, callback) {
      if (value === '' || value === undefined || value == null) {
        callback(new Error('证件号码不能为空'))
      }
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error('证件号码不正确'))
      }
      callback()
    },
    checkTel(rule, value, callback) {
      if (value && !/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/.test(value)) {
        callback(new Error('请输入正确的电话号码'))
      }
      callback()
    },
    /**
     * 重置表单
     */
    resetForm() {
      console.log('form', this.$refs.correctPersonForm)
      this.$refs.correctPersonForm.resetFields()
    },

    /**
     * 上传导入文件前验证文件类型
     */
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 文件格式是否为xls,xlsx
        const isAcceptType = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))
        const acceptType = '.jpg,.jpeg,.png,.JPG,.JPEG,.PNG'
        if (!(acceptType.indexOf(isAcceptType) > -1)) {
          this.$message.warning('请上传' + acceptType + '格式文件')
          return reject(false)
        }
        // 文件小于10M
        const isLtSize = file.size / 1024 / 1024 < 10
        if (!isLtSize) {
          this.$message.warning('请上传10MB以内的文件')
          return reject(false)
        }
        return resolve(false)
      })
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile(data) {
      console.log(data)
      minioUpload(data.file).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          this.$message.error('上传图片失败')
        } else {
          this.$message.success('上传图片成功')
          this.infoForm.avatar = res.data.id
          this.infoForm.avatarUrl = res.data.url
        }
      })
    },
    /**
     * 提交表单
     */
    onSubmit() {
      const copyForm = JSON.parse(JSON.stringify(this.infoForm))
      this.$refs.correctPersonForm.validate((valid) => {
        this.loading = true
        if (valid) {
          console.log('submit!', copyForm)
          if (copyForm.startdate) {
            copyForm.startdate = this.$moment(copyForm.startdate).format('YYYY-MM-DD')
          }
          if (copyForm.enddate) {
            copyForm.enddate = this.$moment(copyForm.enddate).format('YYYY-MM-DD')
          }
          if (copyForm.deptid && copyForm.deptid.length > 6) {
            copyForm.adid = copyForm.deptid.substring(0, 6)
          }
          if (copyForm.cardno) {
            copyForm.cardnoIndex = copyForm.cardno.substring(copyForm.cardno.length - 4)
            copyForm.cardno = Encrypt(copyForm.cardno)
          }
          console.log('加密后!', copyForm)
          saveOrUpdatePerson(copyForm).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.msg)
            } else {
              this.$message.success('保存成功')
              this.$emit('reloadList')
              this.$emit('close')
            }
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    },
  },
}
</script>

<style>
</style>
